<template>
  <div>
    <!-- 导航 -->
    <van-nav-bar class="nav-bar">
      <template #title>
        <van-button
          icon="search"
          plain
          type="info"
          round
          class="search-btn"
          @click="$router.push('/search')"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- tabs -->
    <!-- active 控制tab切换，属性值为tab的索引 -->
    <van-tabs v-model="active">
      <van-tab v-for="item in myChannel" :key="item.id" :title="item.name">
        <article-list :channel-id="item.id"></article-list>
      </van-tab>
      <span class="toutiao toutiao-gengduo" @click="isShowEdit = true"></span>
    </van-tabs>
    <!-- 频道编辑弹层 -->
    <van-popup
      v-model="isShowEdit"
      position="bottom"
      :style="{ height: '100%', width: '100%' }"
      closeable
      close-icon-position="top-left"
    >
      <edit-popup
        :my-channels="myChannel"
        @update-active="[(active = $event), (isShowEdit = false)]"
        @delete-channel="deleteChannels"
        @addChannels="addMyChannels"
      ></edit-popup>
    </van-popup>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
import { getChannelAPI, deleteMyChannelAPI, addMyChannelAPI } from "@/api";
import ArticleList from "./components/ArticleList.vue";
import EditPopup from "./components/EditPopup/index.vue";
//  $event在js中表示事件对象
// 在vue中表示自定义事件中，子像父传参：第一个参数
export default {
  name: "Home",
  components: {
    ArticleList,
    EditPopup
  },
  data() {
    return {
      active: 0,
      myChannel: [],
      // 是否显示编辑弹层
      isShowEdit: false
    };
  },
  created() {
    this.initChannel();
  },
  computed: {
    ...mapGetters(["isLogin"])
  },
  methods: {
    ...mapMutations(["SET_MY_CHANNELS"]),
    async initChannel() {
      // 如果登录了，就发起请求
      if (this.isLogin) {
        this.getMyChannel();
      } else {
        // 如果未登录，先看本地有没有数据
        const { myChannel } = this.$store.state;
        if (myChannel.length > 0) {
          this.myChannel = myChannel;
        } else {
          await this.getMyChannel();
          this.SET_MY_CHANNELS(this.myChannel);
        }
        // console.log(1);
      }
    },
    async getMyChannel() {
      const { data } = await getChannelAPI();
      console.log(data);
      this.myChannel = data.data.channels;
      // try {
      // } catch (error) {
      //   throw error;
      // }
    },
    // 删除频道
    async deleteChannels(id) {
      try {
        this.$toast.loading({
          message: "删除中...",
          forbidClick: true
        });
        // 把删除的数据给提到上面，这样可以复用
        const newChannel = this.myChannel.filter((item) => item.id !== id);
        if (this.isLogin) {
          // 如果登录了,就发送请求
          await deleteMyChannelAPI(id);
        } else {
          // 如果未登录，就把添加好的数据存储到本地存储
          this.SET_MY_CHANNELS(newChannel);
        }
        this.myChannel = newChannel;
        this.$toast.success("删除成功");
      } catch (error) {
        this.$toast.fail("删除失败");
      }
    },
    // 添加频道
    async addMyChannels(myChannels) {
      try {
        this.$toast.loading({
          message: "添加中...",
          forbidClick: true
        });
        if (this.isLogin) {
          // 如果登录了,就发送请求
          await addMyChannelAPI(myChannels.id, this.myChannel.length);
        } else {
          // 如果未登录，就把添加好的数据存储到本地存储
          // console.log(this.myChannel, myChannels);
          this.SET_MY_CHANNELS([...this.myChannel, myChannels]);
        }
        this.myChannel.push(myChannels);
        this.$toast.success("添加成功");
      } catch (error) {
        this.$toast.fail("添加失败");
      }
    }
  }
};
</script>

<style scoped lang="less">
:deep(.nav-bar) {
  background-color: #3296fa;
  .van-nav-bar__title {
    max-width: unset;
  }
  .search-btn {
    width: 7.4rem;
    height: 0.85333rem;
    color: #fff;
    background-color: #5babfb;
    border: unset;
  }
  .van-icon-search {
    color: #fff;
  }
}
/* tabs导航条样式 */
:deep(.van-tabs__wrap) {
  padding-right: 66px;

  .van-tabs__nav {
    padding-left: 0;
    padding-right: 0;

    /* tab标签 */
    .van-tab {
      border: 1px solid #eee;
      width: 200px;
      height: 82px;
    }

    /* tab标签下划线 */
    .van-tabs__line {
      width: 31px;
      height: 6px;
      background-color: #3296fa;
      bottom: 40px;
    }
  }
}

/* 字体图标 */
.toutiao-gengduo {
  position: absolute;
  top: 0;
  right: 0;
  width: 66px;
  height: 82px;
  font-size: 40px;
  line-height: 82px;
  text-align: center;
  opacity: 0.6;
  border-bottom: 1px solid #eee;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 1px;
    // background-image: url("~@/assets/images/gradient-gray-line.png");
  }
}
</style>
